<template>
  <a-card title="相簿">
    <div class="center">
      <a-image
        :preview="{ visible: false }"
        :width="200"
        src="https://img.zcool.cn/community/01775c55a6046f32f8758bedb8d271.jpg@1280w_1l_2o_100sh.jpg"
        @click="visible = true"
      />
      <div style="display: none">
        <a-image-preview-group
          :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }"
        >
          <a-image
            v-for="photo in photos"
            :key="photo.id"
            :src="photo.url"
            fallback=""
          />
        </a-image-preview-group>
      </div>
    </div>
    <template #actions>
      <camera-outlined v-if="is_me()" @click="photoSpace()" key="camera" />
    </template>
  </a-card>
</template>

<script>
import { CameraOutlined } from "@ant-design/icons-vue";
import { ref } from "@vue/reactivity";
import router from "@/router";
import { onMounted } from "@vue/runtime-core";
import albumApi from "@/apis/albumApi";
import store from "@/store";
import { useRoute } from 'vue-router';
export default {
  name: "PhotoAlbum",
  components: {
    CameraOutlined,
  },
  setup() {
    const visible = ref(false);

    const route = useRoute();

    const access = store.state.user.info.access;
    const userId = route.params.userId;

    const is_me = () => {
      if(userId === store.state.user.info.id) return true;
      return false;
    }

    const photoSpace = () => {
      router.push({ name: "albumlist" });
    };

    const photos = ref([]);

    onMounted(() => {
      getPhotos();
    });

    const getPhotos = () => {
      albumApi.getPhotosById(userId,access).then((resp) => {
        photos.value = resp.data.albums;
      });
    };

    return {
      visible,
      photos,

      photoSpace,
      is_me,
    };
  },
};
</script>

<style scoped>
div.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>